<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* /* div,p,h1{
            color: red;
        } */
        /* <!-- 此处应用了组合选择器。 --> */
         /* div.xiaodi{
            color: yellow;
         } */
         /* 此处将类选择器和标签选择器相结合 */
         /* .background.xiaodi{
            color: red;
            background-color: black;
        } */
         /* #xiaodi{
            color:red;
         } */
         /* *{
            color:rgb(72, 255, 0);
            margin: 0px;
            padding: 0px;
         } */
         /* 通配符选择器作用于全局的属性，但是优先级很低。 */
         /* h1 p {
            color: green;
         } */
         /* 此处应用了后代选择器。 */
         /* h1>p{
            color: red;
         } */
          li+li{
            color: red;
          }
          /* 此处运用了兄弟标签 */
    </style> 

</head>
<body>
    <!-- <div>
        小滴课堂
    </div>
    <p>有很多的课程。</p>
    <h1>前段</h1> --> 
    <!-- <div id="xiaodi">小滴课堂</div> -->
    <!-- 一个id选择器的属性值在html文档中只能出现一次，避免写js时出现混淆。 -->
     <!-- <p class="xiaodi">有很多的课程</p> -->
    <!-- <h1>
        <p>
            <i>
                小滴课堂
            </i>
        </p>
    </h1> -->
    <!-- <h1><p><p>小滴课堂</p></p></h1>
    <h2><p>有很多的课程</p></h2> -->
    <ul>
        <li>前端</li>
        <li>后端</li>
        <li>测试</li>
    </ul>
    <ol>
        <li>电脑</li>
        <li>键盘</li>
        <li>鼠标</li>
    </ol>
</body>
</html>